﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<style>
    #flows .empty{
        margin-top:10px;
    }

    a.disabled {
        cursor:default;
    }

    .flow-cate, .flow-def {
        font-weight: bold;
    }

    .flow-count{
        display:inline-block;
        margin-left:10px;
    }

    .flow-def {
        font-size: 16px;
    }

    #flows > fieldset {
        margin-top: 5px;
    }

    #flows a,#flows a:hover,#flows a:active,#flows a:visited {
        text-decoration: none;
    }

    #flows legend {
        margin-bottom: 5px;
    }

    #flows ul{
        padding-left:10px;
        list-style:none;
    }

    #flows li{
        padding:3px 8px;
        display:inline-block;
        width:300px;
        height:218px;
        border:1px solid #ececec;
    }

    #flows li:hover {
        box-shadow:4px 4px 3px #ccc;
    }

    .flow-def {
        font-size: 16px;
    }

    fieldset.disabled, fieldset.disabled a{
        color:gray !important;
    }

    .flow-def-remark
    {
        height:110px;
        text-indent:3px;
    }

    .flow-def-version, .flow-def-stableVersion {
        font-size: 14px;
    }

        .flow-def-stableVersion span {
            color: green;
        }

        .flow-def-createTime{
            color: gray;
        }

    .flow-def-actions{
        text-align:right;
        font-size:14px;
    }

    .flow-def-actions i {
        margin-left: 5px;
    }

    .search .input-group{
        float:left;
    }

    .topPanel .search .input-group
    {
        line-height:unset;
        margin-right:5px;
    }

    .search .input-group .form-control
    {
        float:unset;
    }

    .ui-sgcollapsed a{
        display:inline-block;
        padding-top: 5px;
    }

    .flow-action {
        margin-right: 10px;
    }
</style>
<script>
    function showOperate(cellValue, options, rowObject) {
        if (rowObject.nodeId) {
            if (rowObject.isOwner) {
                return "<a href=\"javascript:void(0);\" class=\"flow-action\" onclick=\"addWeight('" + rowObject.id + "')\">催办</a><a href=\"javascript:void(0);\" class=\"flow-action\" onclick=\"stopFlow('" + rowObject.id + "')\">停止</a>";
            }
        }
        return "";
    }

    function searchFlow(c,f,v) {
        $("#txtCateId").val(c).trigger("change");
        $("#txtWFID").val(f).trigger("change");
        $("#txtVersion").val(v);
        $("a[href='#instances']").off("shown.bs.tab").tab("show");
        initFlowList();
    }

    $(function () {
        initControl();
    })

    function initControl() {
        $("#txtCateId").renderSelect({
            url: "/WorkFlow/WFCategory/GetTreeSelectJson",
        });
        initMyFlow();
        $("#btn_search").click(function () {
            $("#gridList").trigger('reloadGrid');
        });
        $("a[href='#instances']").one("shown.bs.tab", function () {
            initFlowList();
        });
    }

    function addWeight(id) {
        $.getJSON("/WorkFlow/WFDef/AddWeight?id=" + id, function (rsp) {
            if (rsp.result) {
                $.modalAlert("操作成功", "success");
            }
        });
    }

    function stopFlow(id) {
        $.modalConfirm("确定要停止该流程吗？", function (result, index) {
            top.layer.close(index);
            if (result) {
                $.getJSON("/WorkFlow/WFDef/StopFlow?id=" + id, function (rsp) {
                    if (rsp.result) {
                        $.modalAlert("操作成功", "success");
                    }
                    else {
                        if (!rsp.msg) {
                            rsp.msg = "操作失败";
                        }
                        $.modalAlert(rsp.msg, "error");
                    }
                    $("#gridList").trigger('reloadGrid');
                });
            }
        });
    }

    function startFlow(id) {
        $.loading(true);
        $.getJSON("/WorkFlow/WFDef/StartFlow?id=" + id, function (rsp) {
            $.loading(false);
            if (!rsp.result) {
                $.modalAlert(rsp.msg, "error");
            }
            else {
                if (rsp.msg) {
                    $.modalMsg(rsp.msg, "success");
                    searchFlow(null,id,null);
                }
                else {
                    var idx = rsp.tag.indexOf(":");
                    var size = rsp.tag.substr(0, idx);
                    if (!size) {
                        size = ["800px", "700px"];
                    }
                    else {
                        size = size.split(",");
                        size[0] = size[0] + "px";
                        size[1] = size[1] + "px";
                    }

                    rsp.tag = rsp.tag.substr(idx + 1);
                    top.layer.open({
                        id: "StartFlow",
                        type: 2,
                        shade: 0.3,
                        title: "发起流程",
                        fix: false,
                        area: size,
                        content: "/WorkFlow/WorkFlow/Process?id=" + rsp.tag,
                        btn: ['提交', '关闭'],
                        btnclass: ['btn btn-primary', 'btn btn-danger'],
                        yes: function (index) {
                            top.frames["StartFlow"].process(function (pr) {
                                if (pr.state) {
                                    top.layer.close(index);
                                    top.layer.alert("流程提交操作成功", {
                                        icon: "fa-check-circle",
                                        title: "流程提交",
                                        btn: ['确认'],
                                        btnclass: ['btn btn-primary']
                                    }, loadMyMsg);
                                }
                                else if (pr.msg) {
                                    top.layer.alert(pr.msg, {
                                        icon: "fa-times-circle",
                                        title: "处理结果",
                                        btn: ['确认'],
                                        btnclass: ['btn btn-primary']
                                    });
                                }
                                else {
                                    top.layer.close(index);
                                    loadMyMsg();

                                }
                            });
                        }, cancel: function () {
                            return true;
                        }
                    });
                }
            }
        });
    }

    function initMyFlow() {
        $("#flows").on("click", ".flow-cate a", function () {
            searchFlow($(this).data("id"),null,null);
        });
        $("#flows").on("click", ".flow-def a", function () {
            searchFlow(null,$(this).data("id"),null);
        });
        $("#flows").on("click", ".flow-def-stableVersion a", function () {
            searchFlow(null,$(this).data("id"),$(this).find("span").text());
        });
        $("#flows").on("click", ".flow-def-actions a:not(.disabled)", function () {
            startFlow($(this).data("id"),);
        });
        $.getJSON("/WorkFlow/WFDef/MyFlowList", function (rsp) {
            if (rsp.length > 0) {
                var flows = $("#flows").empty();
                var defs = [{ id: " ", text: "--流程--" }];
                rsp.forEach(function (c) {
                    var cate = $("<fieldset><legend class=\"flow-cate\"><a href=\"javascript:void(0)\"></a><div class=\"flow-count\">(<span></span>)</div></legend><ul></ul></fieldset>");
                    cate.find(".flow-cate a").data("id", c.cateId).text(c.cateName);
                    cate.find(".flow-count span").text(c.defs.length);
                    c.defs.forEach(function (d) {
                        var def = $("<li><fieldset><legend class=\"flow-def\"><a href=\"javascript:void(0)\"></a></legend><div class=\"flow-def-remark\"></div><div class=\"flow-def-version\">最新版本<span></span></div><div class=\"flow-def-stableVersion\"><a href=\"javascript:void(0)\">发布版本<span></span></a></div><div class=\"flow-def-createTime\">创建时间<span></span></div><div class=\"flow-def-actions\"><a href=\"javascript:void(0)\">发起流程<i class=\"fa fa-arrow-right\"></i></a></div></fieldset></li>");
                        def.find(".flow-def").attr("title", d.remark).find("a").data("id", d.id).text(d.name);
                        def.find(".flow-def-remark").text(d.remark);
                        def.find(".flow-def-version span").text(d.version);
                        def.find(".flow-def-stableVersion a").data("id", d.id).find("span").text(d.stableVersion);
                        def.find(".flow-def-createTime").text(d.createTime);
                        if (d.stableVersion == 0) {
                            def.attr("title", d.remark);
                            def.find("fieldset").addClass("disabled");
                            def.find(".flow-def-actions a").addClass("disabled").attr("title", "流程未发布");
                        }
                        else {
                            def.find(".flow-def-actions a").data("id", d.id).attr("title", "使用版本:" + d.stableVersion);
                        }
                        cate.find("ul").append(def);
                        defs.push({ id: d.id, text: d.name });
                    });
                    flows.append(cate);
                });

                $("#txtWFID").renderSelect({
                    data: defs,
                });
            }
        });
    }

    function initFlowList() {
        var $gridList = $("#gridList");
        var flag = $gridList.data("flag");
        if (flag) {
            $gridList.trigger('reloadGrid');
        }
        else {
            $gridList.dataGrid({
                url: "/WorkFlow/WFDef/FlowList",
                height: $(window).height() - 207,
                mtype: "POST",
                shrinkToFit: false,
                colModel: [
                    { label: '', name: 'id', key: true, hidden: true },
                    { label: '', name: 'nodeId', hidden: true },
                    { label: '名称', name: 'name', sortable: false,width: 130, align: 'left' },
                    { label: '分类', name: 'cateName', sortable: false, width: 80, align: 'left' },
                    { label: '发起人', name: 'createUserName', sortable: false, width: 80, align: 'center' },
                    { label: '发起时间', name: 'createTime', sortable: false, width: 150, align: 'left' },
                    { label: '状态', name: 'remark', sortable: false, width: 100, align: 'center' },
                    { label: '操作', name: '_op', sortable: false, width: 80, formatter: showOperate },
                ],
                pager: "#gridPager",
                viewrecords: true,
                altRows: false,
                multiselect: false,
                multiboxonly: false,
                userDataOnFooter: false,
                footerrow: false,
                sortorder: "desc",
                subGrid: true,
                subGridOptions: {
                    "plusicon": "glyphicon-triangle-right",
                    "minusicon": "glyphicon-triangle-bottom",
                    "openicon": "glyphicon-arrow-right",
                    "reloadOnExpand": true,
                    "selectOnExpand": true
                },
                subGridRowExpanded: function (subgrid_id, row_id) {
                    var subgrid_table_id = subgrid_id + "_t";
                    $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table></div>");
                    jQuery("#" + subgrid_table_id).jqGrid({
                        url: "/WorkFlow/WFDef/FlowNodeList?id=" + row_id,
                        datatype: "json",
                        colModel: [
                            { label: '', name: "id", width: 80, key: true, hidden: true },
                            { label: '上个节点', name: "fromNodeName", width: 100, sortable: false },
                            { label: '节点名称', name: "nodeName", width: 100, sortable: false },
                            { label: '操作时间', name: "createTime", width: 130, sortable: false },
                            { label: '操作人', name: "createUser", width: 70, sortable: false },
                            { label: '备注', name: "remark", width: 100, sortable: false }
                        ],
                        loadonce: true,
                        height: '100%'
                    });
                },
                beforeRequest: function () {
                    var para = {};
                    para.cateId = $("#txtCateId").val().trim();
                    para.wfid = $("#txtWFID").val().trim();
                    para.version = $("#txtVersion").val().trim();
                    para.remark = $("#txt_keyword").val().trim();
                    $(this).jqGrid("setGridParam", {
                        postData: para
                    });
                },
                beforeProcessing: function (data, status, xhr) {
                    if (data.state == "error" && data.message == "NOT_LOGIN") {
                        top.window.location.href = "/Login/Index?url=" + location.href;
                        return false;
                    }
                },
                onSelectRow: null
            });
            $gridList.data("flag", 1);
        }
    }

    function btn_delete() {

    }
</script>
<ul class="nav nav-tabs">
    <li class="active"><a href="#flows" data-toggle="tab">我的流程</a></li>
    <li><a href="#instances" data-toggle="tab">流程实例</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="flows">
        <div class="empty">您没有可用的流程！</div>
    </div>
    <div class="tab-pane" id="instances">
        <div class="topPanel" style="height:unset;line-height:40px;padding:5px;display:flex;">
            <div class="search" style="flex:1;">
                <div class="input-group" style="width:230px;">
                    <select id="txtCateId" type="text" class="form-control">
                        <option value="0">全部分类</option>
                    </select>
                </div>
                <div class="input-group" style="width:200px;">
                    <select id="txtWFID" type="text" class="form-control" placeholder="--流程--">
                    </select>
                </div>
                <div class="input-group" style="width:100px;margin-right:15px;">
                    <input id="txtVersion" type="number" class="form-control" placeholder="流程版本号" min="0">
                </div>
                <div class="input-group">
                    <input id="txt_keyword" type="text" class="form-control" maxlength="50" placeholder="关键字" style="width: 200px;">
                    <span class="input-group-btn" style="width:unset;">
                        <button id="btn_search" type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
                    </span>
                </div>
            </div>
            <div class="toolbar" style="width:100px;">
                @if (ViewBag.btns != null && ViewBag.btns.Contains("NF-delete"))
                {
                    <div class="btn-group">
                        <a id="NF-delete" class="btn btn-primary dropdown-text" onclick="btn_delete()"><i class="fa fa-plus"></i>删除</a>
                    </div>
                }
            </div>
        </div>
        <div class="gridPanel">
            <table id="gridList"></table>
            <div id="gridPager"></div>
        </div>
    </div>
</div>
